<!DOCTYPE html>
<html lang="ch-zn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子溢出、定位、浮动演示</title>
    <link rel="stylesheet" href="css_five.css">
</head>
<body>
    <div class="overflow_1">
        垂直方向：<br>溢出内容
        <br>溢出内容
        <br>溢出内容
        <br>溢出内容
        <br>溢出内容
        <br>溢出内容
        <br>溢出内容
        <br>溢出内容
        <br>溢出内容
    </div>
    <br><br>
    <div class="overflow_2">overflow</div>

    <div class="box pos_static">静态定位，也就是默认定位</div>

    <div class="box pos_relative">相对定位，占用文档流</div>
    <div class="box">另一个盒子</div>
    <div class="box pos_fixed">固定定位，不占用文档流</div>
    <div class="box">另一个盒子</div>
    <div class="box pos_absolute">绝对定位，不占用文档流</div>
    <div class="box">另一个盒子</div>
    <div style="position: relative;">
        <div class="box menu">盒子1</div>
        <div class="box absolute_menu">绝对定位，相对已定位的父容器</div>
        <div class="box">盒子2</div>
    </div>

    <div class="box pos_sticky">粘贴定位，绝对定位与相对定位的混合</div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <h1>浮动</h1>
    <div class="wrapper">
        <div class="layout6">
            <div class="box1">浮动单元1</div>
            <div class="box2">浮动单元2</div>
            <div class="box3">浮动单元3</div>
        </div>
    </div>

    
<h1>浮动</h1>
<div class="wrapper">
    <div class="layout6">
        <div class="box1">浮动单元1</div>
        <div class="box2">浮动单元2</div>
        <div class="box3">浮动单元3</div>
    </div>
</div>

</body>
</html>